import React, { Component } from 'react';
import { Carousel, WingBlank, Flex } from 'antd-mobile';
import banner from '../images/home/banner.png';
import FamilyHealth from '../images/family-health.png';
import ToHome from '../images/tohome-server.png';
import Fruit from '../images/fruit.png';
import CourtYard from '../images/court-yard.png';

class Home extends Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176
    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
            });
        }, 100);
    }
    render() {
        return (
            <div className="yyb_home">
                <div className="yyb_home_banner">
                    <Carousel
                        autoplay={false}
                        infinite
                        beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                        afterChange={index => console.log('slide to', index)}
                    >
                        {this.state.data.map(val => (
                            <a
                                key={val}
                                href="http://www.alipay.com"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={banner}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                </div>
                <WingBlank size="lg">
                    <div className="yyb_link_item">
                        <Flex>
                            <Flex.Item>
                                <div className="link_item">
                                    <img src={FamilyHealth} alt="" />
                                    <span>家人健康</span>
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div className="link_item">
                                    <img src={ToHome} alt="" />
                                    <span>到家服务</span>
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div className="link_item">
                                    <img src={CourtYard} alt="" />
                                    <span>养老机构</span>
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div className="link_item">
                                    <img src={Fruit} alt="" />
                                    <span>膳食养老</span>
                                </div>
                            </Flex.Item>
                        </Flex>
                    </div>
                    <div className="yyb_special_area">
                        <Flex>
                            <Flex.Item>
                                <div className="link_item">
                                    <img src={require('../images/home/special-area1.png')} alt="" />
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div className="link_item">
                                    <img src={require('../images/home/special-area2.png')} alt="" />
                                    <img src={require('../images/home/special-area4.png')} alt="" />
                                </div>
                            </Flex.Item>
                            <Flex.Item>
                                <div className="link_item">
                                    <img src={require('../images/home/special-area3.png')} alt="" />
                                    <img src={require('../images/home/special-area5.png')} alt="" />
                                </div>
                            </Flex.Item>
                        </Flex>
                    </div>
                    <div className="yyb_column">
                        <Carousel
                            autoplay={false}
                            infinite
                            frameOverflow="hidden"
                            cellSpacing={10}
                            slideWidth={0.4}
                            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                            afterChange={index => console.log('slide to', index)}
                        >
                            {this.state.data.map(val => (
                                <a
                                    key={val}
                                    href=""
                                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                >
                                    <img
                                        src={require('../images/home/column1.png')}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </a>
                            ))}
                        </Carousel>
                    </div>
                    <div className="yyb_kong"></div>
                </WingBlank>

            </div>
        )
    }
}
export default Home;